<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: cadetblue;
        }

        div {
            width: 350px;
            height: 350px;
            background-color: aquamarine;
            margin: 0 auto;
            padding: 10px;
            padding-left: 15px;
            border-radius: 10px;
        }

        div label {
            display: inline-block;
            width: 65px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: yellow;
        }

        div input {
            margin-bottom: 10px;
            width: 210px;
        }

        .dd {
            font-size: 12px;
        }

        button {
            margin-top: 10px;
        }

        #ddl {
            width: 15px;
        }
    </style>
</head>

<body>
    <div id="lll">
        <label for="">账号</label>
        <input id="user" type="text" placeholder="用户不能使用特殊字符,长度为6-20">
        <span id="zz"></span><br />

        <label for="">昵称</label>
        <input id="names" type="text">
        <span id="nn"></span><br />

        <label for="">电子邮件</label>
        <input id="email" type="text">
        <span id="dz"></span><br />

        <label for="">身份证</label>
        <input id="card" type="text">
        <span id="ss"></span><br />

        <label for="">手机号码</label>
        <input id="phone" type="text">
        <span id="hm"></span><br />

        <label for="">生日</label>
        <input id="birday" type="text">
        <span id="sr"></span><br />

        <label for="">密码</label>
        <input id="pass" type="text">
        <span id="mm"></span><br />

        <label for="">确认密码</label>
        <input id="repass" type="text">
        <span id="re"></span><br />

        <input type="checkbox" name="" id="ddl">
        <span class="dd">十天免登录</span><br />
        <button id="btn">确认</button>
        <button id="qing">清空</button>
    </div>
</body>

</html>
<script>
    lll.onchange = function () {
        var users = user.value
        var namess = names.value
        var emails = email.value
        var cards = card.value
        var phones = phone.value
        var birdays = birday.value
        var passs = pass.value
        var repasss = repass.value

        var reg1 = /^[a-zA-Z][\w-]{5,19}$/
        var reg2 = /^[\u4E00-\u9FA5]{3,6}$/
        var reg3 = /^[\w]{5,12}@163\.(com|cn|net)$/
        var reg4 = /^\d{17}(\d|(X|x))/
        var reg5 = /^1(3|4|5|6|7|8)\d{9}$/
        var reg6 = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
        var reg7 = /[^ ].{3,20}$/
        if (users !== '') {
            // 账号
            if (reg1.test(users)) {
                zz.innerHTML = '输入正确'
                zz.style.fontSize = 10 + 'px'
                zz.style.color = 'green'
            } else {
                zz.innerHTML = '请正确输入'
                zz.style.fontSize = 10 + 'px'
                zz.style.color = 'red'
            }

            // 昵称
            if (reg2.test(namess)) {
                nn.innerHTML = '输入正确'
                nn.style.fontSize = 10 + 'px'
                nn.style.color = 'green'
            } else {
                nn.innerHTML = '请正确输入'
                nn.style.fontSize = 10 + 'px'
                nn.style.color = 'red'
            }
            //电子邮箱
            if (reg3.test(emails)) {
                dz.innerHTML = '输入正确'
                dz.style.fontSize = 10 + 'px'
                dz.style.color = 'green'
            } else {
                dz.innerHTML = '请正确输入'
                dz.style.fontSize = 10 + 'px'
                dz.style.color = 'red'
            }
            //身份证
            if (reg4.test(cards)) {
                ss.innerHTML = '输入正确'
                ss.style.fontSize = 10 + 'px'
                ss.style.color = 'green'
            } else {
                ss.innerHTML = '请正确输入'
                ss.style.fontSize = 10 + 'px'
                ss.style.color = 'red'
            }
            //手机号码
            if (reg5.test(phones)) {
                hm.innerHTML = '输入正确'
                hm.style.fontSize = 10 + 'px'
                hm.style.color = 'green'
            } else {
                hm.innerHTML = '请正确输入'
                hm.style.fontSize = 10 + 'px'
                hm.style.color = 'red'
            }
            //生日验证
            if (reg6.test(birdays)) {
                sr.innerHTML = '输入正确'
                sr.style.fontSize = 10 + 'px'
                sr.style.color = 'green'
            } else {
                sr.innerHTML = '请正确输入'
                sr.style.fontSize = 10 + 'px'
                sr.style.color = 'red'
            }
            //密码
            if (reg7.test(passs)) {
                mm.innerHTML = '输入正确'
                mm.style.fontSize = 10 + 'px'
                mm.style.color = 'green'
            } else {
                mm.innerHTML = '请正确输入'
                mm.style.fontSize = 10 + 'px'
                mm.style.color = 'red'
            }
            //重复密码
            if (passs === repasss && passs !== '') {
                re.innerHTML = '输入正确'
                re.style.fontSize = 10 + 'px'
                re.style.color = 'green'
                // alert('验证成功')
            } else {
                re.innerHTML = '请正确输入'
                re.style.fontSize = 10 + 'px'
                re.style.color = 'red'
            }


        } else {
            zz.innerHTML = '请正确输入'
            zz.style.fontSize = 10 + 'px'
            zz.style.color = 'red'
        }

        var str = decodeURIComponent(document.cookie);
        console.log(str);

    }
</script>